<script>
import register from "../utils/register";
import constants from "../utils/constants";
import Vue from "vue";
import { compile, mountedVNode, mountedRenderFnContext } from "../utils/compile";
const TAG = "imwe-marker-cluster";

export default {
    name: TAG,
    data() {
        let self = this;
        return {
            tmpVM: null,
            propsRedirect: {
                template: "content",
                markerContent: "renderMarker",
                clusterMarkerContentRender: "renderClusterMarker"
            },
            converters: {
                clusterMarkerContentRender(renderFn) {
                    console.log('cluster renderFn',renderFn);
                    console.log('renderFn',typeof renderFn);
                    return (context)=>{
                        const template = mountedRenderFnContext(renderFn, self,context);
                        this.$customContent = template;     
                        var offset = new AMap.Pixel(-9, -9);                   
                        context.marker.setContent(template.$el)
                        context.marker.setOffset(offset)
                    }
                    
                    
                },
                markerContent(renderFn) {
                    console.log('renderFn',renderFn);
                    console.log('renderFn',typeof renderFn);
                    return (context)=>{
                        const template = mountedRenderFnContext(renderFn, self,context);
                        this.$customContent = template;     
                        var offset = new AMap.Pixel(-9, -9);                   
                        context.marker.setContent(template.$el)
                        context.marker.setOffset(offset)
                    }
                }
            }
        };
    },
    created() {
        this.tmpVM = new Vue({
            data() {
                return { node: "" };
            },
            render(h) {
                const { node } = this;
                return h(
                    "div",
                    { ref: "node" },
                    Array.isArray(node) ? node : [node]
                );
            }
        }).$mount();
        // console.log("tmpVM", this.tmpVM);
    },
    mixins: [register],
    props: {
        gridSize:{
            type:Number,
            default(){
                return 60
            }
        },
        markerList:{
            type:Array,
            default(){
                return []
            }
        },
        markerContent:{},
        clusterMarkerContentRender:{},
        events:{},
        extData:{}
    },
    render(h) {
        const slots = this.$slots.default || [];
        console.log("h", h);
        if (slots.length) {
            this.tmpVM.node = slots;
        }
        return null;
    },
    methods: {
        _initComponents(options) {
            console.log("marker cluster options", options);
            options.zoomOnClick = true
            this.$amapComponent = new AMap.MarkerCluster(this.$amap,options.markerList,options);
            console.log("marker map ", this.$amap);
            // this.$amap.add(this.$amapComponent)
        }
    }
};
</script>
